<template>
  <div class="home">
    <h1>RookieWiki 文章列表
      <el-button icon="el-icon-refresh" circle @click="update('refresh')" style="margin-left:20px;"></el-button>
        <el-input placeholder="搜索..." v-model="query" @keyup.enter.native="update('search')" clearable style="width:50%;float:right;">
          <el-button @click="update('search')" slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </h1>
    <el-divider></el-divider>
    <el-table ref="filterTable" :data="articles" style="width: 100%" @row-click="rowClick">
      <el-table-column prop="title" label="标题" column-key="title" width="300" sortable>
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.title" v-if="strLen(scope.row.title) > 36" placement="top-start">
              <p style="display:inline;">{{ strLen(scope.row.title) > 36 ? scope.row.title.slice(0,getIndex(scope.row.title,36)) + '...' : scope.row.title}}</p>
            </el-tooltip>
            <p v-if="strLen(scope.row.title) <= 36">{{scope.row.title}}</p>
          </template>
        </el-table-column>
      <el-table-column prop="author" label="作者" column-key="author" width="130" sortable></el-table-column>
      <el-table-column prop="editor" label="最近编辑者" column-key="editor" width="130" sortable></el-table-column>
      <el-table-column prop="pubdate" label="发布时间" column-key="pubdate" width="160" sortable></el-table-column>
      <el-table-column prop="update" label="最近更新时间" column-key="update" width="158" sortable></el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template slot-scope="scope">
          <el-button @click="editClick(scope.row)" type="primary" icon="el-icon-edit"  circle></el-button>
          <el-button @click="deleteClick(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'Home',
  data () {
    return {
      articles: [],
      query: '',
      lastUpdateQuery: 'lastUpdateQuery',
      deleting: false
    }
  },
  created () {
    this.update('created')
  },
  methods: {
    update: function (type) {
      this.axios.get('https://lycm.xyz/api/articles/?q=' + this.query)
        .then((res) => {
          this.articles = res.data
          if (type === 'search' && this.query) {
            this.lastUpdateQuery = this.query
          }
          if (type === 'refresh') {
            this.$message({
              message: '刷新成功',
              type: 'success'
            })
          }
        })
        .catch((err) => {
          this.$notify.error({
            title: '在向服务器请求数据时出现错误',
            message: err
          })
        })
    },
    editClick: function (row) {
      this.$router.push('/edit/' + row.id)
    },
    deleteClick: function (row) {
      this.deleting = true
      this.$confirm('将删除文章"' + row.title + '", 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios({
          url: 'https://lycm.xyz/api/articles/' + row.id + '/',
          method: 'delete'
        }).then(res => {
          this.$notify({
            title: '删除请求已发送,请等待管理员审核',
            type: 'success'
          })
          this.deleting = false
        })
      }).catch(() => {
        this.deleting = false
      })
    },
    rowClick: function (row) {
      if (this.deleting) return
      this.$router.push('/article/' + row.id)
    },
    strLen: function (str) {
      let len = 0
      for (let i = 0; i < str.length; i++) {
        if (str.charCodeAt(i) > 127 || str.charCodeAt(i) === 94) {
          len += 2
        } else {
          len++
        }
      }
      return len
    },
    getIndex: function (str, len) {
      let now = 0
      for (let i = 0; i < str.length; i++) {
        if (str.charCodeAt(i) > 127 || str.charCodeAt(i) === 94) {
          now += 2
        } else {
          now++
        }
        if (now >= len) return i
      }
    }
  }
}
</script>
<style scoped>
</style>
